<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt="" />
  </div>
  <el-page-header @back="goBack" content="个人中心" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <H2>用户昵称:{{this.$store.state.customerId}}</H2>
      <el-form>
        <router-link to="personalInfo">
        <el-form-item style="margin-top: 5%">
          <el-tag style="width: 100%;height: 100%;font-size: 20px;background: hsla(0, 0%, 80%, .25) border-box;"><div style="color: black;">个人信息</div></el-tag>
        </el-form-item>
        </router-link>
        <router-link to="shop">
        <el-form-item>
          <el-tag style="width: 100%;height: 100%;font-size: 20px;background: hsla(0, 0%, 80%, .25) border-box;"><div style="color: black;%">购物车</div></el-tag>
        </el-form-item>
        </router-link>
        <router-link to="/myOrders">
          <el-form-item>
            <el-tag style="width: 100%;height: 100%;font-size: 20px;background: hsla(0, 0%, 80%, .25) border-box;"><div style="color: black;">我的订单</div></el-tag>
          </el-form-item>
        </router-link>
        <router-link to="/reckoning">
          <el-form-item>
            <el-tag style="width: 100%;height: 100%;font-size: 20px;background: hsla(0, 0%, 80%, .25) border-box;"><div style="color: black;">我的账单</div></el-tag>
          </el-form-item>
        </router-link>
        <router-link to="/browse">
          <el-form-item>
            <el-tag style="width: 100%;height: 100%;font-size: 20px;background: hsla(0, 0%, 80%, .25) border-box;"><div style="color: black;">浏览记录</div></el-tag>
          </el-form-item>
        </router-link>
        <router-link to="/loginInfo">
          <el-form-item>
            <el-tag style="width: 100%;height: 100%;font-size: 20px;background: hsla(0, 0%, 80%, .25) border-box;"><div style="color: black;">登录情况</div></el-tag>
          </el-form-item>
        </router-link>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      goBack(){
        this.$router.push('/header1');
      }
    }
  };
</script>

<style scoped>
  .background{
    width:100%;
    height:100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }
  .card{
    position: relative;
    margin-top: 5%;
    margin-left: 37%;
    padding: 1em;
    max-width: 23em;
    background: hsla(0,0%,50%,.25) border-box;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
  }
  .line{
    width: 20px;
    margin-top: 0%;
    margin-left: 25%;
  }
  .line1{
    width: 250px;
    height: 20px;
    font-size: 20px;
    margin-top: -11%;
    margin-left: 40%;
    text-align: left;
    outline: black;
  }
</style>
